[Androidアプリ開発] 透明ボタンを作ってみた

今回は、Androidで 透明ボタン を作ってみます。
この記事でいっている 透明ボタン とは、通常時は透明で、タップした時は半透明になるボタンのことです。

実装

では、作っていきます。
まず、ボタンタップ時の半透明の色を、 colors.xml に追記します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="clearButtonPressed">#33000000</color>
</resources>

次に、透明ボタンの drawable を作成します。
「drawable」フォルダ内に、新たに clear_button_bg.xml ファイルを作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/clearButtonPressed" android:state_pressed="true" />
    <item android:drawable="@android:color/transparent" />
</selector>

最後に、透明ボタンをレイアウトファイルに記述します。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="120dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <View
            android:id="@+id/image"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:layout_marginStart="10dp"
            android:background="@drawable/stack_penguin_2_app_icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="54dp"
            android:gravity="center"
            android:text="Penguin!" />

        <Button
            android:id="@+id/clearButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/clear_button_bg" />
    </RelativeLayout>

</android.support.constraint.ConstraintLayout>

動作確認

では動かしてみます。
通常時は、こんな感じです。

タップするとこんな感じです。

ボタン内部の画像や文字列がちょっと複雑になっても、上から透明ボタンを被せてボタンタップ時の色を調整できます。
これに角丸を付けてみようかと思いましたが、それはまた今度。
ではでは。